<template>
  <div class="search_details">
    <van-nav-bar @click-left="onClickLeft" right-text left-arrow>
      <van-icon slot="right" name="ellipsis" />
      <!-- 插槽-搜索框 -->
      <van-search
        slot="title"
        v-model="search_name"
        placeholder="花洒仅398元"
        left-icon
        right-icon="search"
        shape="round"
        @click="getSearch"
      ></van-search>
    </van-nav-bar>
        <van-list finished-text="我是有底线的~" v-model="loading" :finished="finished" @load="onLoad">
    <van-card v-for="(item,index) in details" :key="index" @click="detailsCard">
      <!-- 图片 -->
      <div slot="thumb" class="image">
        <img width="110px" height="100px" :src="item.image" alt />
      </div>
      <!-- 标题 -->
      <div class="title" slot="title">
        <van-tag slot="tags" plain type="danger">自营</van-tag>
        {{item.goods_name}}
      </div>
      <!-- 价格 -->
      <div slot="price">
        ￥
        <span class="price">{{item.price}}</span>
        <van-tag color="#ff9502">抢购价</van-tag>
      </div>
      <!-- 评论 -->
      <div class="bottom" slot="bottom">331050评论</div>
    </van-card>
        </van-list>
  </div>
</template>

<script>
export default {
  data () {
    return {
      search_name: '',
      details: [],
      loading: false,
      finished: false,
      page: 1, // 当前的页数
      per_page: 4 // 每页条数
    }
  },
  methods: {
    getSearch () {
      this.$router.push('/search')
    },
    onClickLeft () {
      this.$router.push('/search')
    },
    // 点击跳转到商品详情页
    detailsCard () {
      // console.log(111)
    },
    async onLoad () {
      const { data: res } = await this.$http.post(`/details?page=${this.page}&per_page=${this.per_page}`, {
        search_name: this.search_name
      })
      let data = res.data
      // console.log(data.length)
      this.details.push(...data)
      // this.details = res.data
      setTimeout(() => {
        this.loading = false
      }, 1500)
      if (this.details.length >= 20) {
        this.finished = true
      } else {
        this.page++
      }
    }
  },
  created () {
    let searchNames = sessionStorage.getItem('search_name')
    this.search_name = searchNames
    this.onLoad()
  }
}
</script>

<style lang='less'>
body,
.van-card {
  background-color: #ffffff;
}

.search_details {
  padding-bottom: 50px;
}

.search_details .van-card {
  padding: 0;
  padding-left: 5px;
  padding-right: 20px;
  border-bottom: 1px solid #e6e6e6;
}

.search_details .van-search {
  padding: 0;
  padding-top: 6px;
}

.search_details .van-tag {
  padding: 0;
  padding-left: 3px;
  padding-right: 3px;
  margin-right: 5px;
  font-size: 10px;
}

.search_details .title {
  width: 100%;
  font-size: 18px;
  margin-left: 5px;
  margin-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search_details .desc {
  color: #7a7f85;
}

.search_details .price {
  margin-top: 10px;
}

.search_details .price {
  margin-right: 10px;
  font-size: 26px;
}

.search_details .van-card__price {
  margin-top: 20px;
  margin-bottom: 10px;
}

.search_details .bottom {
  color: #919599;
}

.van-card__content {
  margin-left: 15px;
}

.image {
  width: 110px;
  height: 100px;
  margin-right: 10px;
}
</style>
